<template>
  <section class="mui-content pd pb">
    <header class="mui-bar mui-bar-nav">
      <h1 class="mui-title">我的</h1>
      <button type="button" class="mui-pull-right mui-btn-link setting" @click='saoCode'>
        <img src="../../assets/images/ico/icon-sao.png" alt="扫一扫">
      </button>
    </header>
    <div class="my-info mh-pd flex-bt">
      <div class="my-info-left flex">
        <div>
          <div class="pic-box">
            <img :src="myInfo.portrait" alt="头像">
          </div>
        </div>
        <div class="info-r">
          <div class="flex">
            <span class="u-name" v-text="myInfo.nickname">用户名</span>
            <span class="hn-level">铜牌红娘</span>
          </div>
          <button type="button" class="mh-btn improve-btn">提升等级</button>
        </div>
      </div>
      <div class="my-info-right flex">
        <div class="qr-code" @tap="showCode"></div>
      </div>
    </div>
    <div class="qrcode-bg" v-show='codeFlag' @tap="showCode">
      <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
    <!--菜单列表-->
    <div class="nav-menu">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <router-link class="mui-navigate-right" :to="{path: '/profile/billing'}">账单中心</router-link>
        </li>
        <li class="mui-table-view-cell" @click='shareShow'>
          <a class="mui-navigate-right">邀请好友</a>
        </li>
        <li class="mui-table-view-cell">
          <router-link class="mui-navigate-right" :to="{path: '/docAndTest'}">测试和文档</router-link>
        </li>
        <li class="mui-table-view-cell">
          <router-link class="mui-navigate-right" :to="{path: '/myTemplate'}">我保存的互动模板</router-link>
        </li>
        <li class="mui-table-view-cell">
          <router-link class="mui-navigate-right" :to="{path: '/myGallary'}">我的图片库</router-link>
        </li>
        <li class="mui-table-view-cell">
          <router-link class="mui-navigate-right" :to="{path: '/setIndex'}">设置</router-link>
          <!-- <span class="mui-navigate-right">设置</span> -->
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="#forward" >导出网友资料为个人简历</a>
        </li>
        <li class="mui-table-view-cell">
          <router-link class="mui-navigate-right" :to="{path: '/addressManage'}">地址管理</router-link>
        </li>
      </ul>
      <div class="mui-content-padded">
        <button type="button" class="mui-btn-block mh-btn" @tap="matchApplicate">切换至网友端</button>
      </div>
    </div>
    <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom" style="z-index: 10002">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <a href="#">全部导出为PDF格式</a>
        </li>
        <li class="mui-table-view-cell">
          <a href="#">全部导出为图片格式</a>
        </li>
      </ul>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <a href="#forward"><b>取消</b></a>
        </li>
      </ul>
    </div>

    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </section>
</template>

<script>
  import TabMenu from '@/components/tab-menu/hn-tab';
  import {MH_API} from "@/api/api";
  import QRCode from 'qrcodejs2';

  let shares = null;
  export default {
    name: "explore",
    data () {
      return {
        activeFootTab: 6,
        myInfo: {
          userId: '1399460',
          name: 'Winness',
          avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
          completeFile: 60,
          gallery: [
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
          ]
        },
        codeFlag: false
      }
    },
    created () {
      this.$nextTick(function() {
        mui('.mui-progressbar').each(function () {
          mui(this).progressbar({progress:this.getAttribute("data-progress")}).show();
        });
      });
      let self = this;
      MH_API.getUserInfo({
        id: window.localStorage.getItem("userid")
      }).then(res => {
        if (res.status === 200) {
          self.myInfo = res.data;
        }
      })
    },
    methods: {
      saoCode(){
        this.$router.push({
          path: '/scancode'
        })
      },
      showCode(){
        this.codeFlag = !this.codeFlag;
      },
      toSetIndex(){
        this.$router.push({
          path: '/setIndex'
        })
      },
      myGallery () {
        this.$router.push({path: '/profile/gallery', query: {id: '1'}})
      },
      allService () {
        this.$router.push({path: '/profile/service', query: {id: '1'}})
      },
      matchApplicate () {
        this.$router.push({path: '/meet'})
      },
      shareShow(){
        let self = this;
        var shareBts=[];
        // 更新分享列表
        var ss=shares['weixin'];
        if(navigator.userAgent.indexOf('qihoo')<0){  //在360流应用中微信不支持分享图片
          ss&&ss.nativeClient&&(shareBts.push({title:'微信朋友圈',s:ss,x:'WXSceneTimeline'}),
          shareBts.push({title:'微信好友',s:ss,x:'WXSceneSession'}));
        }
        // 弹出分享列表
        shareBts.length>0?plus.nativeUI.actionSheet({title:'分享',cancel:'取消',buttons:shareBts}, function(e){
          (e.index>0)&&self.shareAction(shareBts[e.index-1],true);
        }):plus.nativeUI.alert('当前环境无法支持分享操作!');
      },
      //分享操作
      shareAction(sb,bh) {
        let self = this;
        console.log('分享操作：');
        if(!sb||!sb.s){
          console.log('无效的分享服务！');
          return;
        }
        var msg={content:'',extra:{scene:sb.x}};
        if(bh){
          msg.href = 'https://www.pgyer.com/JbKI';
          msg.title = '美荷交友';
          msg.content = '美荷网以“用科技让人们的生活更幸福”为己任，秉承真诚、专业、可信赖的服务宗旨。';
          msg.thumbs = ['https://appicon.pgyer.com/image/view/app_icons/d31644a65937dce3bec8e334cd568f9d/120']
        }else{
          //分享到单张图片
          // if(pic&&pic.realUrl){
          //   msg.pictures=[pic.realUrl];
          // }
        }

        // 发送分享
        if(sb.s.authenticated){
          console.log('---已授权---');
          self.shareMessage(msg, sb.s);
        }else{
          console.log('---未授权---');
          sb.s.authorize(function(){
            self.shareMessage(msg,sb.s);
          }, function(e){
            console.log('认证授权失败：'+e.code+' - '+e.message);
          });
        }
      },
      /**
         * 发送分享消息
         * @param {JSON} msg
         * @param {plus.share.ShareService} s
         */
      shareMessage(msg, s){
        console.log(JSON.stringify(msg));
        s.send(msg, function(){
          mui.toast('分享到"'+s.description+'"成功！');
        }, function(e){
          mui.toast('分享到"'+s.description+'"失败: '+JSON.stringify(e));
        });
      }
    },
    components: {
      TabMenu
    },
    mounted(){
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: '1103',
          width: 150,
          height: 150,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
     })
      mui.plusReady(function () {
        //分享
        plus.share.getServices(function(s) {  
          shares={};
          for(var i in s){
            var t=s[i];
            shares[t.id]=t;
          }
        }, function(e) {  
          console.log("获取分享服务列表失败：" + e.message);  
        });
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .qrcode-bg{ width:100%; height:100%; position:fixed; top:0;left:0; background-color:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; z-index:9999;}
  .qrcode{ border:1rem solid #fff; border-radius:0.3rem;}
  .my-info,.my-identify,.mui-bar,.upload-in,.nav-menu {background: #fff;}
  .mui-bar-nav {box-shadow: none;}
  .mui-bar {height: 4.5rem;}
  .mui-title {
    line-height: 4.5rem;
    color: #333;
    font-size: 1.7rem;
  }
  .cus {
    margin-right: 1.5rem;
    img {width: 2rem;}
  }
  .setting { img {width: 2rem;} }
  .pic-box {@include mh-avatar-box(5rem, 5rem)}
  .qr-code {
    width: 3rem;
    height: 3rem;
    margin-right: .5rem;
    background: url("../../assets/images/bg/bg_qrcode.png") no-repeat left top;
    background-size: 100% 100%;
  }
  .u-name {@include sc(1.5rem, #333);}
  .file-comp {margin: .3rem 0 .9rem}
  .info-r {margin-left: .5rem;}
  .mui-progressbar {
    height: .5rem;
    background: #eee;
    border-radius: .4rem;
    span {
      border-radius: .4rem;
      background: linear-gradient(180deg, #dd65a1 0%, #fa625a 100%);
    }
  }
  .my-info-right {
    &>span {@include sc(1.2rem, #999)}
  }
  .nav-menu {
    margin-top: 1rem;
    overflow: auto;
    .mui-content-padded {
      margin-top: 5rem;
      margin-bottom: 3rem;
    }
  }
  .hn-level {
    margin-left: .2rem;
    padding: .05rem .4rem;
    background: linear-gradient(180deg, #6a3906 0%, #b28850 100%);
    border-radius: .25rem;
    color: #fff;
    font-size: 1rem;
  }
  .improve-btn {
    padding: .3rem .4rem;
    font-size: 1.3rem;
    border-radius: 1rem;
  }
  .mui-table-view-cell>a:not(.mui-btn) {
    @include sc(1.5rem, #333);
  }
  body .mui-backdrop {z-index: 10000;}
</style>
